<template>
  <div class="map-list-left-wrapper">
    <div class="title">房屋列表</div>
    <div class="search">
      <el-input
        class="search-input"
        v-model="searchParams.keywords"
        placeholder="请输入房屋名称"
        :suffix-icon="Search"
        @keyup.enter="initTableList(1)"
      ></el-input>
    </div>
    <div class="content">
      <div class="content-item" v-for="(item, index) of tableData" :key="index">
        <span class="content-item-name" @click="handleDetail(item)">{{
          item.name
        }}</span>
        <span class="content-item-address">{{ item.address }}</span>
        <svg-icon
          name="edit"
          size="14px"
          @click="handleEdit({ pkid: item.pkid }, 'buildingAdd', true)"
        />
      </div>
    </div>
    <div class="page">
      <el-pagination
        class="custom-pagination"
        :current-page="paginationParams.pageIndex"
        :page-size="paginationParams.pageSize"
        background
        :page-sizes="[10, 20, 30, 50]"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="initTableList"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import { buildingPageList } from '@/api/manager/dataManage/building'
const props = defineProps({
  parkId: {
    type: String,
  },
})
const searchParams = ref({
  parkId: '',
  keywords: '',
})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  detailRef,
  currentDetail,
  handleEdit,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, buildingPageList)
watch(
  () => props.parkId,
  (newVal) => {
    searchParams.value.parkId = newVal
    initTableList(1)
  },
  {
    immediate: true,
  },
)
defineExpose({ initTableList })
const emit = defineEmits(['detail'])
const handleDetail = (row) => {
  emit('detail', row.pkid)
}
onMounted(() => {
  initTableList(1)
})
</script>
<style lang="scss" scoped>
.map-list-left-wrapper {
  width: 320px;
  height: calc(100% - 40px);
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    padding: 0 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d5deed;
  }
  .search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
  }
  .content {
    flex: 1;
    overflow-y: auto;
    &-item {
      width: 100%;
      height: 88px;
      box-sizing: border-box;
      padding: 15px;
      position: relative;
      display: flex;
      flex-direction: column;
      &-name {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
        margin-bottom: 7px;
      }
      &-address {
        font-weight: 400;
        font-size: 14px;
        color: #757575;
      }
      .svg-icon {
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 15px;
      }
    }
  }
  .page {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 10px 15px;
  }
}
</style>
